<template>
  <div class="app-container">
    <div id="app">
      <el-row gutter="20">
        <el-col :span="4">
          <el-menu :unique-opened="true">
            <el-submenu v-for="(item,index) in cateList" :key="index" index="1">
              <template slot="title">{{ item.text }}</template>
              <el-menu-item-group>
                <el-menu-item v-for="(child,cindex) in item.children" :key="cindex" :index="index+'-'+cindex" @click="getTopicDetail(child.id)">{{ child.text }}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>

        </el-col>
        <el-col :span="20">
          <el-card>
            <div slot="header" class="clearfix">
              <span>{{ detail.topic_title }}</span>
            </div>
            <div class="text-container" v-html="detail.topic_content" />
          </el-card>

        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
import { getCateList } from './category/api'
import { getView } from './topic/api'

export default {
  data: function() {
    return {
      cateList: [],
      detail: {
        topic_title: '帮助手册',
        topic_content: '帮助商家快速使用'
      }
    }
  },
  created() {
    this.getcate()
  },
  methods: {
    getcate() {
      getCateList().then(res => {
        this.cateList = res.data
      })
    },
    getTopicDetail(id) {
      getView(id).then(res => {
        this.detail = res.data
      })
    }
  }
}
</script>

<style>
.text-container {
  margin-top: 10px;
}

</style>
